<template>
    <view class="co-margin-bt">
        <view class="title-top">
            <titles :data="titleData"></titles>
        </view>
        <view>
            <view class="uni-padding-wrap uni-common-mt">
                <view>
                    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
                        <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
                        <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
                        <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import titles from '../../common/title/title'
export default {
    components: {
        titles
    },
    data() {
        return {
            titleData: {
                title: '名师榜',
                sign: 'linear-gradient(45deg, rgba(255,139,139,0.00) 0%, rgba(255,183,98,0.70) 38%, #FFA100 100%)',
            },
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        upper: function(e) {
            console.log(e)
        },
        lower: function(e) {
            console.log(e)
        },
        scroll: function(e) {
            console.log(e)
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
            uni.showToast({
                icon:"none",
                title:"纵向滚动 scrollTop 值已被修改为 0"
            })
        }
    }
}
</script>

<style>
.co-margin-bt {
    height: 150upx;
    width: 100%;
}
</style>
